<template>
	<view>
		<view class="image-content">
			<image style="background-color: #eeeeee;width: 100vh;" :mode="mode" :src="src" @error="imageError"></image>
		</view>
		<view class="container">
			<view class="register">
				<uni-forms ref="baseForm" :modelValue="alignmentFormData" :label-position="alignment">
					<uni-forms-item>
						<uni-easyinput v-model="baseFormData.setpwd" @input="resetPassword"
							:placeholder="$t('register.setPwd.promptsetPwd')" suffixIcon="checkmarkempty" />
					</uni-forms-item>

					<uni-forms-item>
						<uni-easyinput v-model="baseFormData.resetpwd" @input="resetPassword"
							:placeholder="$t('register.setPwd.promptResetPwd')" suffixIcon="checkmarkempty" />
					</uni-forms-item>

					<uni-forms-item>
						<uni-easyinput v-model="baseFormData.code" @input="resetPassword"
							:placeholder="$t('register.setPwd.code')" suffixIcon="checkmarkempty" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" disabled="true" @click="submit('baseForm')">提交</button>
			</view>

			<view class="button-group">
				<!-- 输入密码：<uni-easyinput></uni-easyinput> -->
				<button class="button" @click="handleClick1('button1')">下一步进入拍照示例</button>
			</view>
		</view>
		<view class="image-content">
			<image style="background-color: #eeeeee;width: 100vh;" :mode="mode" :src="src" @error="imageError"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: require('@/static/images/registerFooter.png'),
				mode: 'aspectFit',
				text: '头部图片文字描述',
				isValid: false,
				alignment: "left",
				// 基础表单数据
				baseFormData: {
					setpwd: '',
					resetpwd: '',
					code: '',
				},
				// 表单数据
				alignmentFormData: {
					setpwd: '',
					resetpwd: '',
					code: '',
				},
			}
		},
		methods: {
			handleClick1(buttonName) {
				uni.navigateTo({
					url: '/pages/register/photographDemo'
				});
			},
			imageError: function(e) {
				console.error('image发生error事件，携带值为' + e.detail.errMsg)
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			resetPassword() {
				if (this.setpwd.length < 6) {
					this.setpwd = '密码长度不能少于6位';
				} else {
					// 调用后端接口重置密码
					// resetPassword(this.originPassword, this.newPassword);
					this.setpwd = '密码重置成功！';
				}
			}
		}
	}
</script>


<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		padding: 20px;
	}

	.button {
		flex: 1;
		margin: 10px;
		padding: 10px 20px;
		background-color: #007AFF;
		color: #FFFFFF;
		border-radius: 5px;
	}

	.register {
		text-align: center;
		width: 100%;
		font-size: xx-large;
	}

	.image-content {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;

	}
</style>